<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #canvas {
            background: rebeccapurple;
        }
    </style>
</head>
<body>

<canvas id="canvas"></canvas>

<script>
    const canvas = document.getElementById('canvas')
    canvas.width = window.innerWidth
    canvas.height = window.innerHeight

    const text = '劳动光荣'

    const ctx = canvas.getContext('2d')
    ctx.font = 'bold 50px arial'

    //填充文字
    ctx.fillStyle = 'green'
    ctx.fillText(text, 100, 200)

    //描边文字
    ctx.lineWidth = 3
    ctx.strokeStyle = 'red'
    ctx.strokeText(text, 400, 200)

    //获取文字宽度
    const {width} = ctx.measureText(text)
    console.log(width)
    ctx.strokeText(text, 400, 400, width / 2)

</script>
</body>
</html>
